<template>
  <div>
    <ymm-content title="体检详情" :subtitle="`${user.name}—第${exam.academicYear}学年`">
      <template slot="toolbar">
        <el-button-group>
          <el-button v-if="!isEdit" type="primary" icon="el-icon-back" @click="goBack">返回
          </el-button>
          <el-button v-if="!isEdit" type="primary" icon="el-icon-edit" @click="isEdit=true">编辑</el-button>
          <el-button v-if="isEdit" type="primary" icon="el-icon-check" @click="save">保存</el-button>
          <el-button v-if="user.type==1" type="primary" @click="addAdvice">添加建议</el-button>
        </el-button-group>
      </template>
      <template>
        <!--基础信息表格开始-->
        <table class="ymm-table">
          <caption>{{ `${user.name}—第${exam.academicYear}学年的体检情况` }}</caption>
          <tbody>
          <tr>
            <td rowspan="3" class="table-title">基础信息</td>
            <td>姓名:</td>
            <td>{{ user.name }}</td>
            <td>性别：</td>
            <td>
              <span v-if="!isEdit">{{ examInfo.sex == 0 ? '男' : '女' }}</span>
              <el-select v-model="examInfo.sex" placeholder="请选择性别" v-if="isEdit">
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </td>

            <td rowspan="3" colspan="2" style="width: 100px;">
              <img :src="user.avatar" alt="">
            </td>
          </tr>
          <tr>
            <td>民族：</td>
            <td>
              <span v-if="!isEdit&&examInfo.nation">{{ examInfo.nation }}</span>
              <el-input v-if="isEdit" v-model="examInfo.nation" placeholder="请输入民族"></el-input>
            </td>
            <td>年龄：</td>
            <td>
              <span v-if="!isEdit&&examInfo.age">{{ examInfo.age }}岁</span>
              <el-input v-if="isEdit" v-model="examInfo.age" placeholder="请输入年龄"></el-input>
            </td>
          </tr>
          <tr>
            <td>籍贯：</td>
            <td colspan="3">
              <span v-if="!isEdit&&examInfo.nativePlace"> {{ exam.nativePlace }}岁</span>
              <el-input v-if="isEdit" v-model="examInfo.nativePlace" placeholder="请输入籍贯"></el-input>
            </td>
          </tr>
          </tbody>
        </table>
        <!--基础信息表格结束-->
        <!--外科表格开始-->
        <table class="ymm-table">
          <tr>
            <td rowspan="4" class="table-title">外科</td>
            <td>体重:</td>
            <td>
              <span v-if="!isEdit&&exam.weight"> {{ exam.weight }}kg</span>
              <el-input v-if="isEdit" v-model="examInfo.weight" placeholder="请输入体重"></el-input>
            </td>
            <td>身高：</td>
            <td>
              <span v-if="!isEdit&&exam.height">  {{ exam.height }}cm</span>
              <el-input v-if="isEdit" v-model="examInfo.height" placeholder="请输入身高"></el-input>
            </td>
          </tr>
          <tr>
            <td>腰围:</td>
            <td>
              <span v-if="!isEdit&&exam.waistCircumference"> {{ exam.waistCircumference }}cm</span>
              <el-input v-if="isEdit" v-model="examInfo.waistCircumference" placeholder="请输入腰围"></el-input>
            </td>
            <td>臀围：</td>
            <td>
              <span v-if="!isEdit&&exam.hipCircumference">{{ exam.hipCircumference }}cm</span>
              <el-input v-if="isEdit" v-model="examInfo.hipCircumference" placeholder="请输入臀围"></el-input>
            </td>
          </tr>
          <tr>
            <td>血糖：</td>
            <td>
              <span v-if="!isEdit&&exam.bloodSugar">{{ exam.bloodSugar == '0' ? '正常' : '异常' }}</span>
              <el-select v-model="examInfo.bloodSugar" placeholder="请选择血糖状态" v-if="isEdit">
                <el-option label="正常" value="0"></el-option>
                <el-option label="异常" value="1"></el-option>
              </el-select>
            </td>
            <td>血脂：</td>
            <td>
              <span v-if="!isEdit&&exam.bloodFat">{{ exam.bloodFat == '0' ? '正常' : '异常' }}</span>
              <el-select v-model="examInfo.bloodFat" placeholder="请选择血脂状态" v-if="isEdit">
                <el-option label="正常" value="0"></el-option>
                <el-option label="异常" value="1"></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>收缩压：</td>
            <td>
              <span v-if="!isEdit">{{ exam.systolicPressure }}</span>
              <el-input v-if="isEdit" v-model="examInfo.systolicPressure" placeholder="请输入收缩压"></el-input>
            </td>
            <td>收缩压：</td>
            <td>
              <span v-if="!isEdit">{{ exam.diastolicPressure }}</span>
              <el-input v-if="isEdit" v-model="examInfo.diastolicPressure" placeholder="请输入舒张压"></el-input>
            </td>
          </tr>
        </table>
        <!--外科表格结束-->
        <!--五官科表格开始-->
        <table class="ymm-table">
          <tr>
            <td rowspan="2" class="table-title">五官科</td>
            <td>左眼视力:</td>
            <td>
              <span v-if="!isEdit"> {{ exam.visionLeft }}</span>
              <el-input v-if="isEdit" v-model="examInfo.visionLeft" placeholder="请输入左眼的视力"></el-input>
            </td>
            <td>右眼视力：</td>
            <td>
              <span v-if="!isEdit">{{ exam.visionRight }}</span>
              <el-input v-if="isEdit" v-model="examInfo.visionRight" placeholder="请输入右眼的视力"></el-input>
            </td>
          </tr>
          <tr>
            <td>左耳听力:</td>
            <td>
              <span v-if="!isEdit&&examInfo.hearingLeft">{{ exam.hearingLeft == '0' ? '正常' : '异常' }}</span>
              <el-select v-model="examInfo.hearingLeft" placeholder="请选择左耳听力状态" v-if="isEdit">
                <el-option label="正常" value="0"></el-option>
                <el-option label="异常" value="1"></el-option>
              </el-select>
            </td>

            <td>右耳听力：</td>
            <td>
              <span v-if="!isEdit&&examInfo.hearingRight">{{ exam.hearingRight == '0' ? '正常' : '异常' }}</span>
              <el-select v-model="examInfo.hearingRight" placeholder="请选择右耳听力状态" v-if="isEdit">
                <el-option label="正常" value="0"></el-option>
                <el-option label="异常" value="1"></el-option>
              </el-select>
            </td>
          </tr>
        </table>
        <!--五官科表格结束-->
        <!--其余检测表格开始-->
        <table class="ymm-table">
          <tr>
            <td rowspan="2" class="table-title">其他项目</td>
            <td>体温:</td>
            <td>
              <span v-if="!isEdit&& exam.temperature "> {{ exam.temperature }}℃</span>
              <el-input v-if="isEdit" v-model="examInfo.temperature" placeholder="请输入体温"></el-input>
            </td>
            <td>脉搏：</td>
            <td>
              <span v-if="!isEdit&&exam.pulse"> {{ exam.pulse }}次/分</span>
              <el-input v-if="isEdit" v-model="examInfo.pulse" placeholder="请输入脉搏"></el-input>
            </td>
          </tr>
          <tr>
            <td>呼吸频率:</td>
            <td>
              <span v-if="!isEdit&&exam.respiratoryRate">{{ exam.respiratoryRate }}次/分</span>
              <el-input v-if="isEdit" v-model="examInfo.respiratoryRate" placeholder="请输入呼吸频率"></el-input>
            </td>
            <td colspan="2"></td>
          </tr>
        </table>
        <!--其余检测表格结束-->
        <!--医生建议-->
        <suggestion v-for="adv in advices" :key="adv.id" :author="adv.doctorName"
                    :date="adv.createTime" :text="adv.content"/>
      </template>
    </ymm-content>
    <el-dialog title="请输入建议" :visible.sync="showAddAdvice" width="30%">
      <el-input type="textarea" :autosize="{ minRows: 3}" placeholder="请输入您的建议" v-model="advice">
      </el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="showAddAdvice = false">取 消</el-button>
    <el-button type="primary" @click="handleAddAdvice">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import YmmContent from "@/components/common/ymm-content";
import Suggestion from "@/views/student/exam/detail/suggestion";
import {updateExam} from "@/api/student-exam";
import {addAdvice, getAdviceByExam} from "@/api/advice";

export default {
  data() {
    return {
      examInfo: {},
      isEdit: false,
      showAddAdvice: false,
      advice: '',
      advices: []
    }
  },
  created() {
    this.getAdviceList()
  },
  computed: {
    ...mapGetters(['exam', 'user'])
  },
  components: {
    YmmContent, Suggestion
  },
  methods: {
    getAdviceList() {
      getAdviceByExam(this.exam.id).then(res => {
        this.advices = res
        console.log(res)
      }).catch(err => {
        this.$message.error('获取评论列表失败')
      })
    },
    save() {
      updateExam(this.examInfo).then(res => {
        this.$message.success('保存成功')
      }).catch(err => {
        this.$message.error('修改失败')
      })
      this.isEdit = false
      this.$store.commit('student/CHANGE_EXAM', this.examInfo)
    },
    goBack() {
      if (this.user.type == 1) {
        this.$router.push({name: "ExamAdmin"})
      } else {
        this.$router.push({name: "Exam"})
      }
    },
    addAdvice() {
      this.advice = ''
      this.showAddAdvice = true
    },
    handleAddAdvice() {
      const obj = {
        examId: this.examInfo.id,
        doctorId: this.user.id,
        content: this.advice
      }
      addAdvice(obj).then(res => {
        this.$message.success('添加成功')
        this.showAddAdvice = false
        this.getAdviceList()
      }).catch(err => {
        console.log(err)
        this.$message.error('添加失败')
      })
    }
  },
  mounted() {
    this.examInfo = this.$store.getters.exam
  }
}
</script>

<style scoped lang="less">
.ymm-table {
  border: 2px solid #cccccc;
  width: 60%;
  user-select: none;
  border-collapse: collapse;
  margin: 5px auto;
  table-layout: fixed;

  caption {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
  }

  .table-title {
    width: 10%;
    font-size: 18px;
    font-weight: 600;
    background-color: #dddddd;
    writing-mode: vertical-rl;
    padding-left: 4%;
  }


  td {
    text-align: center;
    padding: 15px;
    border-right: 2px solid #cccccc;
    border-bottom: 2px solid #cccccc;
    background-color: #fff;

    img {
      width: 100px;
      height: 150px;
    }
  }

}
</style>
